<template>
<div>
    <el-dialog :visible.sync="version.dialogAddVersion" size="tiny">
        <p class="dialog-title" v-if="version.isAddVersion">添加版本</p>
        <p class="dialog-title" v-if="!version.isAddVersion">修改版本</p>
        <el-form :model="version" :rules="rules" ref="version" label-width="90px">
            <el-row :gutter="30">
                <el-col :span="23" v-if="version.isAddVersion">
                    <el-form-item label="名称" prop="sName">
                        <el-select v-model="version.sName" style="width:100%" placeholder="请选择版本名称">
                            <el-option v-for="item in sNameList" :key="item.sSource" :label="item.sAppName" :value="item.sSource"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="23">
                    <el-form-item label="当前版本" prop="currVesion">
                        <el-popover placement="top-start" trigger="focus" content="版本格式请以“v”开头，后面为数字加“.”例如v3.0.1">
                            <el-input v-model="version.currVesion" placeholder="请输入当前版本号" :maxlength="20" slot="reference"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="23">
                    <el-form-item label="上线时间" prop="updateDate">
                        <el-date-picker v-model="version.updateDate" style="width:100%" type="date" :editable="false" placeholder="请选择上线时间"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="23">
                    <el-form-item label="最小版本" prop="sMinVersion">
                        <el-popover placement="top-start" trigger="focus" content="版本格式请以“v”开头，后面为数字加“.”例如v3.0.1">
                            <el-input v-model="version.sMinVersion" placeholder="请输入最小版本号" :maxlength="20" slot="reference"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
                <el-col :span="23">
                    <el-form-item label="描述" prop="sDesc">
                        <el-popover placement="top-start" trigger="focus" content="字符长度不大于1000位">
                            <el-input type="textarea" :rows="6" v-model="version.sDesc" placeholder="请输入描述信息" :maxlength="1000" slot="reference"></el-input>
                        </el-popover>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <p class="btn">
            <el-button @click="resetFormdelDialogAddTea('version')">取 消</el-button>
            <el-button type="primary" @click="addVersion('version')" :loading="loadingBtn">确 认</el-button>
            </p>
        </div>
    </el-dialog>
</div>
</template>
<script>
import { getAppTypeList, addAppVersion, updateAppVersion} from 'api/versionMagement';
import moment from 'moment';
export default {
    props: {
        version: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            loadingBtn: false,
            sNameList: [],
            rules: {
                currVesion: [
                    { required: true, message: '当前版本号不能为空', trigger: 'blur' }
                ],
                sName: [
                    { required: true, message: '版本名称不能为空', trigger: 'change' }
                ],
                updateDate: [
                    {required: true, type: 'date', message: '上线时间不能为空', trigger: 'change'}
                ],
                sMinVersion: [
                    { required: true, message: '最小版本号不能为空', trigger: 'blur' }
                ],
                sDesc: [
                    { required: true, message: '描述不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getName();
    },
    methods: {
        addVersion(version) {
            this.$refs[version].validate((valid) => {
                if (valid) {
                    // moment().toISOString(updateDate)
                    let updateDate = this.version.updateDate==''?'':moment(this.version.updateDate).format('YYYY-MM-DD');
                    this.loadingBtn = true;
                    if (this.version.isAddVersion) {
                        addAppVersion(this.version.currVesion, this.version.sMinVersion, updateDate, this.version.sDesc, this.version.sName).then(res => {
                            this.loadingBtn = false;
                            this.$message({
                                type: 'success',
                                message: '添加新版本成功!'
                            })
                            this.delDialogAddTea();
                            this.$emit('success', res)
                        }).catch(() => {
                            this.loadingBtn = false;
                        })
                    } else {
                        updateAppVersion(this.version.currVesion, this.version.sMinVersion, this.version.pId, this.version.sDesc, updateDate).then(res => {
                            this.loadingBtn = false;
                            this.$message({
                                type: 'success',
                                message: '修改版本成功!'
                            })
                            this.delDialogAddTea();
                            this.$emit('success', res)
                        }).catch(() => {
                            this.loadingBtn = false;
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        getName() {
            getAppTypeList().then(res => {
                this.sNameList = res.data.content;
            })
        },
        handleClose() {
            this.$refs.version.resetFields();
            this.delDialogAddTea();
        },
    // 取消按钮 
        resetFormdelDialogAddTea(dataForm) {
            this.$refs[dataForm].resetFields();
            this.delDialogAddTea();
        },
    // 还原清空弹窗信息
        delDialogAddTea() {
            this.version.sName = '';
            this.version.currVesion = '';
            this.version.updateDate = '';
            this.version.sMinVersion = '';
            this.version.sDesc = '';
            this.version.dialogAddVersion = false;
        }
    }
}
</script>
<style lang="scss" scoped>
    .el-form{
        padding-left:5px;
    }
    .dialog-title{
        width:60%;
        margin:0 auto;
    }
</style>


